<template>
  <div class="singer_music">
      <div class="left">
          <div class="header">
              <span class="name">{{ xinxi.name }}</span>
              <span class="bieming" v-for="(v, i) in xinxi.alias" :key="i">
                  {{ v }}
              </span>
          </div>
          <div class="pic">
              <img :src="xinxi.picUrl" alt="">
              <a href="javascript:;" class="geren" @click="$router.push(`/geren/${id}`)" v-if="accountId">
                  <i class="el-icon-user"></i>
                  个人主页
                </a>
              <a href="javascript:;" class="shoucang" @click="scButton(1)" v-if="!isShow">
                  <i class="el-icon-folder-add"></i>
                  收藏
                </a>
                <a href="javascript:;" class="shoucang" v-else @click="scButton(0)">取消收藏</a>
          </div>
          <template>
              <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="热门作品" name="first">
                    <Button></Button>
                    <musicTab :hotSongs="hotSongs"></musicTab>
                </el-tab-pane>
                <el-tab-pane label="所有专辑" name="second">
                    <!-- <NewAlbum></NewAlbum> -->
                </el-tab-pane>
                <el-tab-pane label="相关MV" name="third">相关MV</el-tab-pane>
                <el-tab-pane label="艺人介绍" name="fourth">艺人介绍</el-tab-pane>
              </el-tabs>
            </template>
      </div>
      <div class="right">
          <div class="u-hd3">
              <span>相似歌手</span>
          </div>
          <ul class="m-hdlist">
              <li v-for="item in simiList" :key="item.id" @click="$router.push(`/singerMus/${item.id}`)">
                  <div class="img" :title="item.name">
                      <img :src="item.picUrl" alt="">
                  </div>
                  <a href="javascript:;" class="text" :title="item.name">{{ item.name }}</a>
              </li>
          </ul>
          <div class="m-multi">
              <h4>网易云音乐多端下载</h4>
              <ul>
                  <li class="iphone">
                      <a href="http://itunes.apple.com/cn/app/id590338362">
                          <img src="@/assets/common/iphone.png" alt="">
                      </a>
                  </li>
                  <li class="pc">
                      <a href="https://music.163.com/api/pc/download/latest" target="_blank">
                          <img src="@/assets/common/PC.png" alt="">
                      </a>
                  </li>
                  <li class="andriod">
                      <a href="https://music.163.com/api/android/download/latest2" target="_blank">
                          <img src="@/assets/common/andriod.png" alt="">
                      </a>
                  </li>
              </ul>
              <p>同步歌单，随时畅听320k好音乐</p>
          </div>
          <a href="" class="last">补充或修改艺人资料></a>
      </div>
  </div>
</template>

<script>
import { getxiangsi, getHotList, getSingerDetail, getHotSong, scButton } from '@/api/singers'
import musicTab from './musicTab.vue'
import Button from './topRight.vue'
// import NewAlbum from '@/views/Recommend/components/NewAlbum'
export default {
  name: 'SingerMusic',
  components: {
    musicTab,
    Button
    // NewAlbum
  },
  data () {
    return {
      activeName: 'first',
      id: this.$route.params.id,
      accountId: '',
      simiList: [],
      xinxi: '',
      detailList: '',
      hotSongs: [],
      isShow: false
    }
  },
  created () {
    this.getxiangsi()
    this.getHotList()
    this.getSingerDetail()
    this.getHotSong()
  },
  watch: {
    '$route' (to, from) {
      this.$router.go(0)
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async getxiangsi () {
      const { data } = await getxiangsi({ id: this.id })
      //   console.log(data)
      this.simiList = (data.artists).slice(0, 6)
    },
    async getHotList () {
      const { data } = await getHotList({ limit: 100 })
      //   this.accountId = data.artists.accountId
      //   console.log(data)
      const res = data.artists.filter(item => item.id.toString() === this.id)
      this.xinxi = res[0]
      this.accountId = res[0].accountId
    //   console.log(this.xinxi)
    },
    async getSingerDetail () {
      const { data } = await getSingerDetail({ id: this.id })
      this.detailList = data.data.artist
    //   console.log(this.detailList)
    },
    async getHotSong () {
      const { data } = await getHotSong({ id: this.id })
      this.hotSongs = data.songs
      console.log(this.hotSongs)
    },
    async scButton (t) {
      try {
        const res = await scButton({ id: this.id, t: t })
        console.log(res)
        if (t === 1) {
          this.$message.success('收藏歌手成功')
        } else {
          this.$message.success('取消收藏歌手成功')
        }
        this.isShow = !this.isShow
      } catch (err) {
        this.$message.warning('未登录')
      }
      //   console.log(res)
    }
  }

}
</script>

<style lang="less" scoped>
.singer_music {
    width: 980px;
    height: 2000px;
    border-left: 1px solid #D3D3D3;
    border-right: 1px solid #D3D3D3;
    .left {
        float: left;
        width: 709px;
        height: 100%;
        // background-color: blueviolet;
        padding: 30px 30px 40px 39px;
        .header {
            margin-bottom: 10px;
            .name {
                font-size: 24px;
                margin-right: 10px;
            }
            .bieming {
                font-size: 14px;
                color: #999;
            }
        }
        .pic {
            position: relative;
            width: 640px;
            height: 300px;
            background-color: burlywood;
            img {
                width: 100%;
                height: 100%;
            }
            .geren {
                display: block;
                position: absolute;
                bottom: 18px;
                right: 116px;
                width: 96px;
                height: 32px;
                color: #fff;
                font-size: 14px;
                font-family: Arial, Helvetica, sans-serif;
                line-height: 32px;
                text-align: center;
                background-color: #30363A;
                border-radius: 6px;
                opacity: 0.8;
                i {
                    color: #fff;
                }
            }
            .shoucang {
                display: block;
                position: absolute;
                bottom: 18px;
                right: 20px;
                width: 76px;
                height: 32px;
                color: #fff;
                line-height: 32px;
                font-size: 14px;
                font-family: Arial, Helvetica, sans-serif;
                text-align: center;
                background-color: #30363A;
                border-radius: 6px;
                opacity: 0.8;
                i {
                    color: #fff;
                }
            }
        }
        /deep/ .el-tabs__header {
            border: 1px solid #ccc;
            border-top: none;
            background-color: #F7F7F7!important;
            .is-active {
                background-color: #fff;
                color: #333;
                border-top: 2px solid #D13030;
                border-bottom: none;
            }
        }

    }
    .right {
        float: left;
        width: 269px;
        height: 100%;
        // background-color: burlywood;
        padding: 20px 40px 40px 30px;
        .u-hd3 {
            height: 23px;
            line-height: 8px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
            color: #333;
            padding-bottom: 8px;
            span {
                font-size: 12px;
                font-weight: 700;
            }
        }
        .m-hdlist {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            li {
                // flex: 1;
                width: 50px;
                height: 92px;
                // background-color: aquamarine;
                .img {
                    float: left;
                    width: 50px;
                    height: 50px;
                    // background-color: blue;
                    img {
                        width: 100%;
                        height: 100%;
                        background-color: blue;
                    }
                }
                .text {
                    float: left;
                    width: 100%;
                    font-size: 12px;
                    font-family: Arial, Helvetica, sans-serif;
                    color: #333;
                    text-align: center;
                    margin-top: 5px;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
        .m-multi {
            margin: 20px 0;
            padding-bottom: 20px;
            h4 {
                height: 23px;
                font-size: 12px;
                font-family: Arial, Helvetica, sans-serif;
                margin-bottom: 20px;
                border-bottom: 1px solid #ccc;
                color: #333;
            }
            ul {
                width: 100%;
                height: 65px;
                .iphone {
                    float: left;
                    width: 42px;
                    height: 48px;
                    a {
                        display: inline-block;
                        width: 33px;
                        img {
                            width: 100%;
                        }
                    }
                }
                .pc {
                    float: left;
                    width: 116px;
                    height: 48px;
                    a {
                        display: inline-block;
                        padding: 2px 26px 0 30px;
                    }
                }
                .andriod {
                    float: left;
                    width: 41px;
                    height: 48px;
                    a {
                        display: inline-block;
                        width: 33px;
                        padding-left: 8px;
                        img {
                            width: 33px;
                        }
                    }
                }
            }
            p {
                font-size: 12px;
                font-family: Arial, Helvetica, sans-serif;
                color: #999;
                margin-top: 10px;
            }
        }
        .last {
            display: block;
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
        }
    }
}
</style>
